<script setup lang="ts">
import { computed, ref } from "vue"
import { CirclePlus } from "@element-plus/icons-vue"
import { getSceneListApi } from "@/api/resources/scene"
import { SceneTableData } from "@/api/resources/scene/types/scene"
import { useQuickStartStore } from "@/store/modules/quick-start"
import { FormTypeEnum, TASK_MODE } from "@/constants/other-keys"
import CreateOrUpdate from "@/views/resource/components/scene/create-or-update.vue"

interface Props {
  trainSceneId: undefined | string | null
  type: TASK_MODE
}
defineProps<Props>()
const emit = defineEmits(["update:trainSceneId"])
const store = useQuickStartStore()
const loading = ref<boolean>(false)
const curId = ref<string>()
const dialogType = ref<FormTypeEnum>(FormTypeEnum.CREATE)
const dialogVisible = ref(false)
const selectSceneId = ref<string>("")

const modeType = computed(() => {
  return store.modeType
})
//#region 查
const tableData = ref<SceneTableData[]>([])
const getTableData = () => {
  loading.value = true
  parent &&
    getSceneListApi(modeType.value)
      .then(({ data }) => {
        tableData.value = data
        loading.value = false
      })
      .catch(() => {
        tableData.value = []
        loading.value = false
      })
}
getTableData()
//#endregion
//#region 详情
const handleView = (row: SceneTableData) => {
  curId.value = row.game_id
  dialogType.value = FormTypeEnum.VIEW
  dialogVisible.value = true
}
//#endregion
//#region 增
const handleCreate = () => {
  curId.value = undefined
  dialogType.value = FormTypeEnum.CREATE
  dialogVisible.value = true
}
//#endregion

const handleSelect = (param: string) => {
  selectSceneId.value = param
  emit("update:trainSceneId", param)
}
const closeDialog = (param: string | undefined) => {
  dialogVisible.value = false
  if (param && param == "refresh") getTableData()
}
const getSceneId = () => {
  return selectSceneId.value
}

defineExpose({ getSceneId })
</script>
<template>
  <div v-if="type == 'Train'" class="tip custom-block">
    <p class="custom-block-title">
      TIP：场景为完整的博弈算法工程包，包括<strong>仿真引擎信息、基础想定、红蓝智能体、RL算法等</strong>。
    </p>
  </div>
  <div v-else class="tip custom-block">
    <p class="custom-block-title">TIP：选择场景，场景为推演工程包，包括所需评估的智能体。</p>
  </div>
  <div class="toolbar-wrapper">
    <div>
      <el-button type="primary" :icon="CirclePlus" @click="handleCreate">上传场景</el-button>
    </div>
  </div>
  <el-row v-loading="loading" shadow="never" :gutter="20">
    <el-radio-group v-model="selectSceneId">
      <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="5" v-for="(item, index) in tableData" :key="index">
        <el-card class="card-item" body-class="card-item body" @click="handleSelect(item.game_id)">
          <template #header>
            <div class="card-header flex-between">
              <el-space class="flex-vc">
                <el-radio :value="item.game_id" />
                <el-icon :size="16"><Calendar /></el-icon>
                <el-text>{{ item.create_time }}</el-text>
              </el-space>
            </div>
          </template>
          <div class="card-body">
            <div class="flex-between relation">
              <el-space class="flex-vc">
                <el-text size="large" class="w-150px mb-2" truncated>
                  {{ item.game_name }}
                </el-text>
              </el-space>
              <el-space class="flex-vc card-operate">
                <el-link :underline="false" @click="handleView(item)">
                  <el-icon :size="18"><View /></el-icon>
                </el-link>
              </el-space>
            </div>
            <p class="describe">
              <el-text type="info" line-clamp="2">
                {{ item.game_describe }}
              </el-text>
            </p>
          </div>
          <template #footer>
            <div class="card-footer flex-between">
              <el-space class="flex-vc">
                <el-icon><UserFilled /></el-icon>
                <el-text>{{ item.create_user.user_name }}</el-text>
              </el-space>
              <el-tag type="info" effect="plain">{{ item.create_user.user_position }}</el-tag>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-radio-group>
  </el-row>
  <CreateOrUpdate
    ref="editDialogRef"
    :id="curId"
    :dialog-type="dialogType"
    :visible="dialogVisible"
    @closeDialog="closeDialog"
    @updateCurId="handleSelect"
  />
</template>
<style lang="scss" scoped>
@import "@/styles/custom.scss";
.el-radio-group {
  width: 100%;
}
.el-radio {
  height: auto;
}
:deep(.el-radio__inner) {
  background-color: white;
}
.el-card {
  cursor: pointer;
}
</style>
